<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./css/article.css">
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js" defer></script>
  <script src="./js/article.js" defer></script>
  <title>文章图片轮播</title>
</head>
<body>
  <div class="carousel">
    <!-- 轮播内容 -->
    <div class="csl-item csl-item1">
      <div class="csl-img"><img src="https://picsum.photos/530/550?1"></div>
      <article>
        <h2 class="subtitle">Yosemite</h2>
        <h1 class="title">优胜美地国家公园</h1>
        <p class="desc">
          优胜美地是内华达山脉最大而且最集中的动植物栖息地之一。该公园的植物和动物多样性极高。公园海拔从2,127至13,114 英尺（648至3,997 米）不等，包括五个主要植被区：沙巴拉群落/ 橡树林地，低山地森林，高山地森林，亚高山植物和高山植物。
        </p>
        <a href="#" class="readmore">阅读更多</a>
      </article>
    </div>

    <div class="csl-item csl-item2">
      <div class="csl-img"><img src="https://picsum.photos/530/550?2" alt=""></div>
      <article>
        <h2 class="subtitle">Sierra Nevada</h2>
        <h1 class="title">内华达山脉</h1>
        <p class="desc">
          内华达山脉（英语：Sierra Nevada），中文又音谢拉内华达，雪乐山是一条纵贯美国加利福尼亚州东部的山脉。部分山体也位于内华达州境内。内华达山脉的最高峰是惠特尼峰，标高 4,418 m。优胜美地国家公园的大部分区域都位于内华达山脉内。内华达山脉内有塔霍湖等湖泊。macOS Sierra 用了该名。
        </p>
        <a href="#" class="readmore">阅读更多</a>
      </article>
    </div>

    <div class="csl-item csl-item3">
      <div class="csl-img"><img src="https://picsum.photos/530/550?3" alt=""></div>
      <article>
        <h2 class="subtitle">Mojave</h2>
        <h1 class="title">莫哈维沙漠</h1>
        <p class="desc">
          莫哈维沙漠（英语：Mojave Desert；西班牙语：desierto de Mojave）是个位于美国西南部，南加利福尼亚州东南部的沙漠。莫哈维沙漠横跨犹他州、内华达州南部及亚利桑那州西北部地区。占地超过 2万2000平方英里（5万7000平方公里）是典型的盆地地形，有特殊的西部沙漠景致。
        </p>
        <a href="#" class="readmore">阅读更多</a>
      </article>
    </div>

    <div class="csl-item csl-item4">
      <div class="csl-img"><img src="https://picsum.photos/530/550?4" alt=""></div>
      <article>
        <h2 class="subtitle">Santa Catalina Island</h2>
        <h1 class="title">圣卡塔利娜岛</h1>
        <p class="desc">
          圣卡塔利娜岛（英语：Santa Catalina Island）位于美国加利福尼亚州南部近海，是海峡群岛的组成部分。
        </p>
        <a href="#" class="readmore">阅读更多</a>
      </article>
    </div>

    <div class="csl-item csl-item5">
      <div class="csl-img"><img src="https://picsum.photos/530/550?5 alt=""></div>
      <article>
        <h2 class="subtitle">Big Sur</h2>
        <h1 class="title">大苏尔</h1>
        <p class="desc">
          大瑟尔（英语：Big Sur），又译为大苏尔，是美国加利福尼亚州中海岸中自卡梅尔高地（Carmel Highlands）至圣西蒙（San Simeon）的一段多山区域，常以景色秀丽闻名。
        </p>
        <a href="#" class="readmore">阅读更多</a>
      </article>
    </div>

    <!-- 按钮 -->
    <nav class="csl-nav">
      <span id="left" class="csl-arrow">
        <svg class="icon" width="24" height="24" viewbox="0 0 24 24">
          <path d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"></path>
        </svg>
      </span>

      <span id="right" class="csl-arrow">
        <svg class="icon" width="24" height="24" viewbox="0 0 24 24">
          <path d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"></path>
        </svg>
      </span>
    </nav>
  </div>
</body>
</html>
